import React from 'react';
import { Layout, Menu, Button } from 'antd';
import { Link, connect } from 'umi';
import logo from '../../assets/logo.png';
import cap from '../../assets/cap.png';
import BarCharts from '../../components/bar';
import AlertReason from '../../components/AlertReason';
import ScatterCharts from '../../components/scatter';
import OnlineCharts from '../../components/online';
import TabsControl from '../../layouts/TabsControl';
const { Header, Content, Footer } = Layout;

function BasicLayout(props: any) {
  const logout = () => {
    props.dispatch({
      type: 'login/logout',
    });
  };

  function home() {
    window.location.href = '/zone';
  }

  function back() {
    window.location.href = '/area';
  }

  return (
    <Layout style={{ height: '100%', fontFamily: 'global' }}>
      <Header style={{ height: '80px', lineHeight: '40px' }}>
        <Content>
          <table style={{ height: '60px', marginLeft: '30%' }}>
            <tr style={{ height: '60px' }}>
              <td style={{ width: '120px', height: '60px' }}>
                <img
                  src={logo}
                  style={{ width: '80px', cursor: 'unset', height: '80px' }}
                />
              </td>
              <td style={{ height: '60px' }}>
                <div
                  style={{
                    height: '27px',
                    fontSize: '27px',
                    lineHeight: '27px',
                    textAlign: 'center',
                    color: 'white',
                  }}
                >
                  深圳外环高速10标段金沙互通工程段
                </div>
                <div
                  style={{
                    height: '27px',
                    fontSize: '27px',
                    lineHeight: '27px',
                    textAlign: 'center',
                    color: 'white',
                  }}
                >
                  施工安全管理大数据中心
                </div>
              </td>
            </tr>
          </table>
        </Content>
        <Button
          style={{ position: 'fixed', right: '20px', top: '8px' }}
          onClick={back}
        >
          返回
        </Button>
      </Header>
      <Content
        style={{ padding: '10px 20px', height: '100%', background: '#001529' }}
      >
        <TabsControl style={{ width: '100%', height: '100%' }}>
          <div name="AI视频感知">
            <table style={{ width: '100%', height: '95%', padding: 0 }}>
              <tr style={{ height: '30%' }}>
                <td className="bd" style={{ width: '30%' }}>
                  <iframe
                    src="http://120.79.77.107:10000/play.html?serial=34020000001320000013&code=34020000001320000013&aspect=fullscreen"
                    width="100%"
                    height="100%"
                    allow="autoplay; fullscreen"
                  ></iframe>
                </td>
                <td className="bd" style={{ width: '30%' }}>
                  <div
                    style={{
                      width: '100%',
                      height: '100%',
                      textAlign: 'center',
                      display: 'flex',
                      alignItems: 'center',
                    }}
                  >
                    <div
                      style={{
                        verticalAlign: 'middle',
                        width: '100%',
                        height: '20px',
                        display: 'inline-box',
                      }}
                    >
                      空
                    </div>
                  </div>
                </td>
              </tr>
              <tr className="bd" style={{ height: '30%' }}>
                <td className="bd">
                  <div
                    style={{
                      width: '100%',
                      height: '100%',
                      textAlign: 'center',
                      display: 'flex',
                      alignItems: 'center',
                    }}
                  >
                    <div
                      style={{
                        verticalAlign: 'middle',
                        width: '100%',
                        height: '20px',
                        display: 'inline-box',
                      }}
                    >
                      空
                    </div>
                  </div>
                </td>
                <td className="bd">
                  <div
                    style={{
                      width: '100%',
                      height: '100%',
                      textAlign: 'center',
                      display: 'flex',
                      alignItems: 'center',
                    }}
                  >
                    <div
                      style={{
                        verticalAlign: 'middle',
                        width: '100%',
                        height: '20px',
                        display: 'inline-box',
                      }}
                    >
                      空
                    </div>
                  </div>
                </td>
              </tr>
            </table>
          </div>
          <div name="AI违规记录" style={{ width: '100%', height: '100%' }}>
            <table style={{ width: '100%', height: '100%' }}>
              <tr style={{ width: '100%', height: '100%' }}>
                <td style={{ width: '70%' }}>
                  <img
                    src={cap}
                    style={{ width: '100%', cursor: 'unset' }}
                  ></img>
                </td>
                <td style={{ width: '30%' }}>
                  <div
                    className="BoxWrap"
                    style={{ height: '100%', width: '100%' }}
                  >
                    <div className="horn" style={{ top: '5%', height: '90%' }}>
                      <div
                        style={{
                          top: '-2.5%',
                          left: '20%',
                          lineHeight: '30px',
                          textAlign: 'center',
                          background: '#3054a4',
                          color: 'white',
                          width: '60%',
                          height: '30px',
                          fontSize: '18px',
                        }}
                      >
                        AI违规记录数据库
                      </div>
                      <div className="lt"></div>
                      <div className="rt"></div>
                      <div className="rb"></div>
                      <div className="lb"></div>
                      <div style={{ height: '100%', width: '100%' }}>
                        <div style={{ height: '10%' }}></div>
                        <div
                          style={{
                            color: 'white',
                            width: '100%',
                            height: '10%',
                            fontSize: '24px',
                            textAlign: 'left',
                            top: '10%',
                          }}
                        >
                          　抓拍时间　
                        </div>
                        <div
                          style={{
                            color: 'white',
                            width: '100%',
                            height: '10%',
                            fontSize: '18px',
                            textAlign: 'center',
                            top: '２0%',
                          }}
                        >
                          2020-12-11 07:01:53
                        </div>
                        <div
                          style={{
                            color: 'white',
                            width: '100%',
                            height: '10%',
                            fontSize: '24px',
                            textAlign: 'left',
                            top: '35%',
                          }}
                        >
                          　姓名　
                        </div>
                        <div
                          style={{
                            color: 'white',
                            width: '100%',
                            height: '10%',
                            fontSize: '18px',
                            textAlign: 'center',
                            top: '45%',
                          }}
                        >
                          张三
                        </div>
                        <div
                          style={{
                            color: 'white',
                            width: '100%',
                            height: '10%',
                            fontSize: '24px',
                            textAlign: 'left',
                            top: '60%',
                          }}
                        >
                          　工牌　
                        </div>
                        <div
                          style={{
                            color: 'white',
                            width: '100%',
                            height: '10%',
                            fontSize: '18px',
                            textAlign: 'center',
                            top: '70%',
                          }}
                        >
                          XJ123456
                        </div>
                        <div
                          style={{
                            color: 'white',
                            width: '100%',
                            height: '10%',
                            fontSize: '24px',
                            textAlign: 'left',
                            top: '85%',
                          }}
                        >
                          　手机　
                        </div>
                        <div
                          style={{
                            color: 'white',
                            width: '100%',
                            height: '10%',
                            fontSize: '18px',
                            textAlign: 'center',
                            top: '95%',
                          }}
                        >
                          13XXXXXXXXX
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
              </tr>
            </table>
          </div>
        </TabsControl>
        {props.children}
      </Content>
    </Layout>
  );
}

export default connect()(BasicLayout);
